<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta name="format-detection" content="telephone=no" />
		<title></title>
		<link href="../c/anchormain.css" rel="stylesheet">
		<link rel="stylesheet" href="../c/zy.media.min.css">
	</head>
	<style>
		body,html{
			overflow: auto;
		}
		.ims {
			position: fixed;
			top: 25%;
			left: 46%;
			width: 10%;
			display: none;
			animation: rotate 3s linear infinite;
		}
		
		@keyframes rotate {
			0% {
				transform: rotate(0);
			}
		
			50% {
				transform: rotate(200deg);
			}
		
			100% {
				transform: rotate(360deg);
			}
		}
		.dh {
			overflow: auto;
		}
		.dh span{
			    border: 0.5px solid #FF06FC;
			    color: #FF06FC;
				display: block;
				float: left;
				border-radius: 0.6rem;
				padding: 0 0.2rem;
				margin: 0.3rem;
		}
		video{
			width: 100%;
			height: auto;
		}
	</style>
	<body>
		<div class="anchor">
			<p class="user_pic" style="background: url(http://www.bobutong.com/upload/2018-10/31/tianchengchengfengmian2.png) no-repeat center center; background-size: auto 100%;">
			</p>
			<p class="anchor_id allp">主播ID:</p>
			<P class="anchor_name allp">艺名:</P>
			<p class="anchor_jz allp">商业价值:</p>
			<p class="anchor_pt allp">常驻平台:</p>
			<p class="anchor_fz allp">粉丝数:</p>
			<p class="anchor_qy allp">粉丝区域:全国</p>
			<p class="anchor_span">
				<!-- 	<span>网红</span>
				<span>电商</span>
				<span>展会</span> -->
			</p>
			<p class="anchor_hz">
				<span>加入主播库</span>
				<span>寻求合作</span>
			</p>
		</div>
		<p class="anchor_tit">自我介绍</p>
		<div class="anchor_div zwjs"></div>
		<p class="anchor_tit">服务项目</p>
		<div class="anchor_div dh"></div>
		<div class="anchor_p">
			<p class="sp ssp"><span>代表作品</span><small></small></p>
			<p class="sp"><span>短视频</span><small></small></p>
			<p class="sp"><span>直播录像</span><small></small></p>
		</div>
		<div class="anchor_vid anchor_pic">
			<div class="anchor_vid_list" style="background: url() no-repeat center center;background-size: auto 100%;">
				<!-- <img src="../i/toux.jpg"> -->
				<!-- <p><img src="i/click.png"><span>888</span></p> -->
			</div>
		</div>
		<div class="anchor_vid anchor_video starvideo" style="display: none;">
			<div class="anchor_vid_list" name="sa" style="background: url() no-repeat center center;background-size: auto 100%;">
				<!-- <img src="../i/toux.jpg"> -->
				<!-- <p><img src="i/click.png"></p> -->
			</div>
		</div>
		<div class="anchor_vid anchor_ly starvideo" style="display: none;">
			<div class="anchor_vid_list" name="sa" style="background: url() no-repeat center center;background-size: auto 100%;">
				<!-- <img src="../i/toux.jpg"> -->
				<!-- <p><img src="i/click.png"></p> -->
			</div>
		</div>
		<div class="video" style="position: absolute;top:0;bottom:0;right: 0;left: 0;background: rgba(0,0,0,0.5);display: none;overflow: auto;width: 100%;">
			<p style="font-size: 2rem;
			color: #fff;
			text-indent: 0.5rem;margin-top: 5%;" class="colses">×</p>
			<div class="playvideo" style="position: fixed; top: 30%;text-align: center;">
				<video autoplay="autoplay" id="video" controls="controls" style="min-height: 100%;margin: 0 auto;margin-left: -15px;"
				 x5-playsinline="true">
					<source src="" type="video/mp4">
					</source>
				</video>
			</div>
		</div>
		<p style="height: 2rem;
		text-align: center;
		font-size: 1.2rem;
		position: fixed;
		line-height: 2rem;
		padding-top: 1rem;
		color: #fff;
		top: 30%;
		text-align: center;
		z-index: 999;
		width: 100%;
		background: rgb(162 157 157);
		line-height: 2rem;
		padding-bottom: 1rem;display: none;"
		 class="tels"><a href="tel:400-766-5818" style="text-decoration: none;color: #fff;">合作请联系客服:400-766-5818</a></p>
		<img src="../i/footer_progress.png" class="ims">

	</body>
</html>
<script src="../j/api.js"></script>
<script src="../j/jquery-3.3.1.min.js"></script>
<script src="../j/zy.media.min.js"></script>
<script type="text/javascript">
	var id = localStorage.getItem("zbID");
	document.body.style.overflow = 'hidden';
	zymedia('video', {
		"autoplay": "true",
		"preload": "auto"
	});
	var screenheight = window.screen.height / 2;
	$("#modelView").width(window.screen.width);
	$("#modelView").height(window.screen.height);
	var videoheight = $(".zy_media").height() / 2;
	var padding_top = screenheight - videoheight - 100;
	$(".playvideo").css({
		"top": padding_top
	});
	$("#modelView").css({
		"margin-top": -1 * (padding_top + $(".zy_media").height())
	});
	apiready = function() {
		$(".ims").show();
		var wid = $(window).width() + 30;
		$(".playvideo").css("width", wid);
		_ajax("index/zhubo", function(ret, err) {
			console.log(JSON.stringify(ret))
			if (ret) {
				$(".ims").hide();
				$(".anchor_id").text("主播ID:" + ret.ret.roomId + "");
				$(".anchor_name").text("艺名:" + ret.ret.roomName + "");
				$(".user_pic").css("background", "url(http://qiniu.live.kxg99.com/" + ret.ret.img_l + ")");
				$(".user_pic").css("background-size", "100% auto");
				$(".user_pic").css("background-repeat", "no-repeat");
				$(".user_pic").css("background-position", "center center");
				$(".anchor_jz").text("商业价值:" + ret.ret.jz + "");
				$(".anchor_pt").text("常驻平台:" + ret.ret.pt + "");
				$(".anchor_fz").text("粉丝数:" + ret.ret.renqi + "w");
				$(".anchor_span").html("<span>" + ret.ret.pt + "</span>");
				$(".zwjs").text(ret.ret.anchorDesc);
				var dhs = ret.ret.contentDesc.length;
				tpl = '';
				for (var i = 0; i < dhs; i++) {
					tpl += '<span>' + ret.ret.contentDesc[i] + '</span>';
				}
				$(".dh").html(tpl);
				$(".anchor_video .anchor_vid_list").attr("name", "http://qiniu.live.kxg99.com/" + ret.ret.img_r + "");
				$("video").attr("poster", "http://qiniu.live.kxg99.com/" + ret.ret.img_l + "");
				$(".anchor_ly .anchor_vid_list").attr("name", "http://qiniu.live.kxg99.com/" + ret.ret.img_r + "");
				$(" .anchor_vid_list").css("background", "url(http://qiniu.live.kxg99.com/" + ret.ret.img_l + ")");
				$(".anchor_vid_list").css("background-size", "100% auto");
				$(".anchor_vid_list").css("background-repeat", "no-repeat");
				$(".anchor_vid_list").css("background-position", "center center");
				// $("video source").attr("src", ret.ret.img_r);
			}
		}, {
			id: id
		})
		// document.addEventListener("fullscreenchange", function () {
		// if（）{
		// 	alert("sss");
		// }else{
		// }
		// });
		$(".sp").on("click", function() {
			$(".sp").removeClass("ssp");
			$(this).addClass("ssp");
			var ind = $(this).index();
			$(".anchor_vid").hide();
			$(".anchor_vid").eq(ind).show();
		})
		//打开视频
		$(".starvideo").on("click", function() {
			$(".video").show();
			//视频路径
			var name = $(this).children(".anchor_vid_list").attr("name");
			sourceDom = $("<source src=\"" + name + "\"type='video/mp4'>");
			$("video").append(sourceDom);
			$("video").css("width", "390px");
			$("video source").css("width", "390px");
			// 自动播放
			$("video").play();
		})
		$(".colses").on("click", function() {
			$(".video").hide();
			$('video').trigger('pause');
		})
		$(".anchor_hz span").eq(1).on("click", function() {
			$(".tels").show();
		})
		$(".tels").on("click", function() {
			$(this).hide();
		})
	}
</script>
